<script setup>
import axios from 'axios';
import {ref} from 'vue';
import { useMenuStore } from '../stores/menu';
import { RouterLink } from 'vue-router';
import { eventBus } from './user/eventBus';
let menu = ref({});
let tab = useMenuStore();
axios.get("/api/menu").then(res=>{
    let list =res.data;
    
    for(let i=0;i<list.length;i++){
        if(list[i].pid==0){
            menu.value[list[i].id] = list[i];     
            menu.value[list[i].id].open=false;
            menu.value[list[i].id].children=[];
        }
    }
    for(let i=0;i<list.length;i++){
        if(list[i].pid!=0){
            menu.value[list[i].pid].children.push(list[i]);
        }
    } 
})
function doopen(index){
   let dianji = menu.value[index];
   if(dianji){
    dianji.open=!dianji.open;
   }
}
async function addTab(menu){
    tabs.addTab(menu);
    await nextTick();
    eventBus.emit('tw');
}
</script>
<template>
    <ul class="menu">
        <li v-for="(item,index) in menu" :key="index">
            <div class="parent" @click="doopen(item.id)">
                <img :src="item.icon" alt="" style="height:15px;width: 15px;">
                <template v-if="!item.children.length">
                <router-link :to="item.path" class="zyy" @click="tab.addTab(item)" >{{ item.title }}</router-link>
                </template>
                <template v-else>
                    <span>{{ item.title }}</span>
                </template>
            </div>
            <ul class="child" v-show="item.open">
                <li v-for="it in item.children" :key="it.id">
                    <img :src="item.icon" alt="" style="height: 15px;width: 15px;">
                <router-link :to="it.path" class="zyy" @click="tab.addTab(it)">{{ it.title }}</router-link> 
                </li>
            </ul>
        </li>
    </ul>
</template>
<style scoped>
.menu{
    max-width: 180px;
    background-color: #ccc;
    list-style: none;
    height: 100vh;
}
.menu li,.child li{
    min-height: 40px;
    line-height: 40px;
    padding: 5px;
    color: white;
}
.child{
    background-color: #585454;
    list-style: none;
    text-align: center;
}
ul,li{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
}
ul>li{
    list-style: none;
}
.parent{
    user-select: none;/*用户选择*/
}
.zyy{
    color: #fff;
    text-decoration: none;
}
.parent:hover{
    background-color: aquamarine;
}
</style>